<template>
	<view class="bank-item" :style="bankThem">
		<canvas v-if="showCanvas" class="bank-icon" :id="uuid" :canvas-id="uuid" />
		<view class="bank-head">
			<image :src="image"></image>
			<view class="bank-info">
				<text class="bank-name">{{bankName}}</text>
				<text class="card-type">{{cardType}}</text>
			</view>
		</view>
		<view class="card-code">
			<text class="omit">****</text>
			<text class="omit">****</text>
			<text class="omit">****</text>
			<text>{{endNumber}}</text>
		</view>
		<view class="rowEnd" @click="look">
			<view class="card_id">
				查看卡号
			</view>
		</view>
		<view style="overflow: hidden;">
			<image :src="image" mode="aspectFit" class="circle bank-watermark"></image>
		</view>
		<uv-modal ref="model" showCancelButton buttonReverse @confirm="confirm" @cancel="cancel" confirmColor="#f9773d">
			<view class="cloumCenter gap20">
				<text>银行卡号</text>
				<text>{{cardCode}}</text>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		name: 'bankItem',
		props: {
			bankCode: {
				type: String,
				required: true
			},
			bankName: {
				type: String,
				required: true
			},
			cardType: {
				type: String,
				default: '储蓄卡'
			},
			cardCode: {
				type: String,
				required: true
			},
			uuid: {
				type: String,
				required: true
			}
		},
		computed: {
			endNumber() {
				let length = this.cardCode.length;
				return this.cardCode.substr(length - 4, length);
			}
		},
		data() {
			return {
				bankThem: '',
				image: '',
				showCanvas: true,
			};
		},
		methods: {
			confirm() {
				console.log('confirm');
			},
			cancel() {
				console.log('cancel');
			},
			async buildItem() {
				this.bankThem = uni.getStorageSync(`BANK_${this.bankCode}`);
				this.image = `/static/BankImg/${this.bankCode}.jpg`; // 从本地路径加载logo
				await this.getThemColor();
				this.showCanvas = false;
			},
			async getThemColor() {
				if (this.bankThem != null && this.bankThem != '') return;
				let bgSize = uni.upx2px(100);
				let iconSize = uni.upx2px(72);
				this.iconContext = uni.createCanvasContext(this.uuid, this);

				this.iconContext.width = bgSize;
				this.iconContext.height = bgSize;
				this.iconContext.fillStyle = '#FFFFFF';
				this.iconContext.beginPath();
				let bgRadio = bgSize / 2;
				this.iconContext.arc(bgRadio, bgRadio, bgRadio - 1, 0, 2 * Math.PI, 0, true);
				this.iconContext.closePath();
				this.iconContext.fill();
				let iconRadio = bgSize / 2 - iconSize / 2;
				this.iconContext.drawImage(this.image, iconRadio, iconRadio, iconSize, iconSize);
				await this.draw(this.iconContext);
				let imageData = await this.getImageData(iconRadio, iconSize);
				this.parsingImageData(imageData);
			},
			parsingImageData(imageData) {
				let statistics = {};
				for (let i = 0, length = imageData.length; i < length; i += 4) {
					let r = imageData[i];
					let g = imageData[i + 1];
					let b = imageData[i + 2];

					// 判断是否是接近白色，设置一个阈值来判断是否跳过
					if (r > 240 && g > 240 && b > 240) {
						continue; // 如果是接近白色，跳过
					}

					// 统计非白色的颜色
					let rgb = [r, g, b];
					let key = rgb.join(', ');

					// 记录颜色出现次数
					statistics[key] = statistics[key] == null ? 1 : statistics[key] + 1;
				}

				// 找出出现最多的颜色
				let maxKey = '';
				Object.keys(statistics).forEach(key => {
					if (maxKey === '') {
						maxKey = key;
					} else {
						maxKey = statistics[maxKey] > statistics[key] ? maxKey : key;
					}
				});

				// 调整颜色，使得颜色稍微亮一点
				let beginColor = maxKey.split(', ').map((item, index) => {
					item = parseInt(item);
					if (index > 1) return item;
					let newColor = item + 10;
					return newColor > 255 ? 255 : newColor;
				}).join(', ');

				// 设置背景色
				this.bankThem = `background-image: linear-gradient(45deg, rgba(${beginColor}, 1), rgba(${maxKey}, 1));`;
				uni.setStorageSync(`BANK_${this.bankCode}`, this.bankThem);
			},
			getImageData(radio, size) {
				return new Promise((resolve, reject) => {
					uni.canvasGetImageData({
						canvasId: this.uuid,
						x: radio,
						y: radio,
						width: size,
						height: size,
						success(res) {
							resolve(res.data);
						},
						fail(err) {
							console.log(err);
							reject();
						}
					}, this);
				});
			},
			draw(context, reserve = false) {
				return new Promise((resolve) => {
					context.draw(reserve, () => {
						resolve();
					});
				});
			},
			look() {
				this.$refs.model.open();
			},
		},
		created() {
			this.$nextTick(() => {
				this.buildItem();
			});
		},

	};
</script>

<style scoped lang="scss">
	.bank-item {
		position: relative;
		height: 280rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.bank-icon {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			width: 100rpx;
			height: 100rpx;
		}

		.bank-head {
			display: flex;
			flex: 1;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				padding: 15rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
			}

			.bank-info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				.bank-name {
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.card-type {
					font-size: 24rpx;
					color: #F1F1F1;
				}


			}
		}

		.card-code {
			position: relative;
			z-index: 99;
			margin-top: 15rpx;
			display: flex;
			justify-content: flex-end;
			color: #FFFFFF;
			font-size: 38rpx;

			.omit {
				font-size: 48rpx;
				margin-right: 30rpx;
			}
		}

		.card_id {
			color: #FFFFFF;
			font-size: 22rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 0.3);
			margin-top: 10rpx;
		}



		.bank-watermark {
			position: absolute;
			right: 10%;
			top: 50%;
			transform: translateY(-50%);
			width: 220rpx;
			height: 220rpx;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			opacity: 0.3;
		}


	}

	.bank-item:after {
		content: "";
		display: block;
		background: inherit;
		filter: blur(10rpx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 10rpx;
		left: 10rpx;
		z-index: -1;
		opacity: 0.4;
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}

	.uv-modal__button-group__wrapper__text {
		color: #000;
	}
</style>